<template>
	<view class="my-recommend-award">
		<view class="m-r-a-img">
			<image class="a-img" :src="tueijianyoujiang1" mode="widthFix"></image>
		</view>
		<view class="m-r-a-recruits">
			<view class="a-r-title">
				<view class="lin"></view>
				<view class="r-t-text">
					{{rulesValue.recommend_rule.title || ''}}
				</view>
				<view class="lin"></view>
			</view>
			<view class="a-r-recruits">
				<view class="r-com">
					<text class="r-c-text">{{rulesValue.recommend_rule.value || ''}}</text>
				</view>
			</view>
		</view>
		<view class="m-r-a-title">
			<image class="t-img" :src="tueijian" mode="widthFix"></image>
			<text class="t-text">我的推荐</text>
		</view>
		<view class="m-r-a-text">
			<view class="a-t-text">
				<text class="te-text">您当日激活用户数量：</text><text class="te-text te-text1">{{num || '0'}}</text><text class="te-text">位</text>
			</view>
			<text class="a-t-text1">注：每天激活的用户数量会在第二天0点后核算奖励并清零。</text>
		</view>
		<view class="m-r-a-but">
			<button class="but" id="shareBtn" open-type="share" type="default" @click="recommend">立即推荐</button>
		</view>
		
		<view class="m-r-a-recruits">
			<view class="a-r-title">
				<view class="lin"></view>
				<view class="r-t-text">
					奖励梯度表
				</view>
				<view class="lin"></view>
			</view>
			<view class="a-r-table">
				<view class="r-t-th bg">
					<text class="r-t-text">用户数量</text>
					<text class="r-t-text">奖励金额</text>
				</view>
				<view class="r-t-th r-t-td" :class="index%2?'bg':''" :key="item.id" v-for="(item,index) in tableData">
					<text class="r-t-text">{{item.num || '0'}}名</text>
					<text class="r-t-text">{{item.price || '0.00'}}元</text>
				</view>
			</view>
		</view>
		<view class="m-r-a-recruits">
			<view class="a-r-title">
				<view class="lin"></view>
				<view class="r-t-text">
					扫码注册
				</view>
				<view class="lin"></view>
			</view>
			<view class="a-r-img">
				<image class="r-img" :src="orcodeImg" mode="aspectFit"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tueijianyoujiang1:`${getApp().globalData.imgScr}bj/tueijianyoujiang1.png`,
				tueijian:`${getApp().globalData.imgScr}bj/tueijian.png`,
				num:0,
				rulesValue:{}, //活动规则,
				orcodeImg:'', // 推荐二维码
				tableData:[], // 奖励梯度数据
				wechat_code:uni.getStorageSync('wechat_code')[0], // 小程序二维码
			}
		},
		onLoad() {
			this.getRecommend()
			this.getRules()
			this.getGradient()
			this.getOrcode()
		},
		methods: {
			/**
			 * 立即推荐按钮事件
			 */
			recommend() {
				console.log('推荐')
			},
			/**
			 * 获取二维码
			 */
			async getOrcode(){
				try{
					let res = await this.$http.post('/index/Login/userinfo')
					this.orcodeImg = res.shareimg[0]
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 获取活动规则
			 */
			async getRules(){
				try{
					let res = await this.$http.get('/index/Communal/config_data',{config_id:8})
					this.rulesValue = res
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 获取奖励梯度
			 */
			async getGradient(){
				try{
					let res = await this.$http.get('/index/Communal/reward_list')
					this.tableData = res
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 获取今日激活用户数量
			 */
			async getRecommend(){
				try{
					let res = await this.$http.post('/index/Cleanerindex/recommend_num')
					this.num = res.num
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			}
		},
		 /**
		* 用户点击右上角分享（index.js）
		*/
		 onShareAppMessage: function (ops) {
		   if (ops.from === 'button') {
		     // 来自页面内转发按钮
		     console.log('，，，',ops.target)
		   }
		   return {
		     title: uni.getStorageSync('wechat_share_title'),
		     path: `pages/index/index?scene=${uni.getStorageSync('cleaningData').openid}`,  // 路径，传递参数到指定页面。
		     imageUrl:uni.getStorageSync('wechat_share_image')[0], // 分享的封面图
		     success: function (res) {
		       // 转发成功
		       console.log("转发成功:" + JSON.stringify(res));
		     },
		     fail: function (res) {
		       // 转发失败
		       console.log("转发失败:" + JSON.stringify(res));
		     }
		   }
		
		 },
	}
</script>

<style lang="scss">
.my-recommend-award {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: #FFF8E1;
	// 顶部图片样式
	.m-r-a-img {
		display: flex;
		width: 100%;
		margin-bottom: 56rpx;
		.a-img {
			width: 100%;
		}
	}
	// 我的推荐样式
	.m-r-a-title {
		position: relative;
		width: 484rpx;
		margin-bottom: 40rpx;
		.t-img {
			width: 100%;
		}
		.t-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-78%);
			font-size: 44rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
	// 当日用户数量样式
	.m-r-a-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
		.a-t-text {
			line-height: 80rpx;
			border-bottom: 1rpx dotted #E22626;
			margin-bottom: 18rpx;
			.te-text {
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
			}
			.te-text1 {
				color: #E22626;
				margin: 8rpx;
			}
		}
		.a-t-text1 {
				font-size: 24rpx;
				font-size: 500;
				color: #777777;
			}
	}
	// 活动规则样式
	.m-r-a-recruits {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		width: 636rpx;
		min-height: 260rpx;
		border: 1rpx solid #EC331B;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 28rpx;
		.a-r-title {
			width: 100%;
			min-height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 26rpx;
			.lin {
				flex: 1;
				height: 2rpx;
				background-color: #FF9F9F;
			}
			.r-t-text {
				width: 236rpx;
				margin: 0 20rpx;
				border: 1rpx solid #EC331B;
				min-height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #E22626;
				border-radius: 28rpx;
			}
		}
		// 规则样式
		.a-r-recruits {
			width: 100%;
			.r-com {
				display: flex;
				.r-c-text {
					line-height: 1.8em;
					font-size: 24rpx;
					font-weight: 500;
					color: #6C6C6C;
				}
			}
		}
		// 梯度表样式
		.a-r-table {
			width: 100%;
			.bg {
				background-color: #FFE6E6;
			}
			.r-t-th {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 44rpx;
				.r-t-text {
					flex: 1;
					font-size: 24rpx;
					font-weight: 600;
					color: #EC331B;
					text-align: center;
				}
			}
			.r-t-td {
				.r-t-text {
					font-weight: 500;
					color: #EC331B;
				}
			}
		}
		// 扫码样式
		.a-r-img {
			width: 170rpx;
			height: 170rpx;
			.r-img {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.m-r-a-but {
		box-sizing: border-box;
		width: 100%;
		padding: 0 36rpx;
		margin-bottom: 32rpx;
		.but {
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #E22626;
			font-size: 34rpx;
			font-weight: 600;
			color: #FFFFFF;
		}
	}
}
</style>
